<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>

			* {
				padding: 0;
				margin: 0;
			}

			.parent {
				width: 600px;
				height: 600px;
				border: 2px solid black;
				margin: 50px auto 0;
			}

			.child {
				width: 200px;
				height: 200px;
				background-color: blue;
				/*transition: 2s;*/
				/* 
					transform: 形变
					translate: 平移; 
					translateX: 沿着x轴进行平移, 值为正, 向右平移, 否则向左平移;
					translateY: 沿着y轴进行平移, 值为正, 向下平移, 值为负, 向上平移;
				*/
				/*transform: translateX(200px) translateY(200px);*/
				

				/* skewX: x轴方向的倾斜角度; */
				/* skewY: y轴方向的倾斜角度; */
				/*transform: skewX(45deg) skewY(45deg);*/
				/*transform: skew(44deg, 44deg);*/
				
				/* rotate: 旋转; */
				/*transform: rotate(45deg);*/

				/*transform: translate(200px, 200px) rotate(45deg) skew(40deg, 40deg);*/

				/* 注意下面这种情况 */
				/*transform: rotate(45deg);*/
				/*transform: translateX(200px);*/

				/* 这两种效果有什么不同 */
				/*transform: rotate(45deg) translateX(200px);*/
				transform: translateX(200px) rotate(45deg);

			}

			

			/*.red {
				width: 200px;
				height: 200px;
				background: red;
			}*/


		</style>
	</head>
	<body>

		<div class="parent">
			<div class="child"></div>
			<!-- <div class="red"></div> -->
		</div>
		
	</body>
</html>